<script setup>
import { hint, Paging } from '@/hooks/hint.js'
import { ref, watch, onMounted } from 'vue'
import { getAllRole, getPermision, getRoleId, getroleUser, delRole } from '@/api/role.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const { current, pageSize, onChange } = Paging()
const { Confirm, msg } = hint()
const Roles = ref([]) // 所有角色
const muaeId = ref([]) // 菜单切换
const Permision = ref([]) // 主页树
const PickOn = ref([]) // 权限
const roleUser = ref([]) // 关联用户
const activeKey = ref('1') // tabs
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    align: 'center'
  },
  {
    title: '员工姓名',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '登录账号',
    dataIndex: 'userName',
    align: 'center'
  }
] // 关联用户table
// 操作Dom
onMounted(() => {})
// 侦听菜单切换
watch(muaeId, async (value) => {
  // await console.log('selectedKeys', value)
  current.value = 1
  pageSize.value = '10'
  getrootRole(value[0])
})
// 发送axios
async function AllRole() {
  // 所有角色
  const res1 = await getAllRole()
  Roles.value = res1.data
  muaeId.value.push(JSON.parse(JSON.stringify(res1.data[0]?.roleId)))
  // console.log('所有角色：', res1.data[0].roleId)

  // 查询所有功能权限(树形)
  const res2 = await getPermision()
  Permision.value = res2.data
  // console.log('功能权限', res2.data)

  getrootRole() // 权限、关联用户
}
async function getrootRole(id = muaeId.value[0]) {
  // 权限选项
  const res = await getRoleId(id)
  PickOn.value = res.data.perms
  // console.log(res.data.perms, '选项')
  getRoleusers()
}
// 获取角色关联用户
async function getRoleusers(id = muaeId.value[0], params = '') {
  const resA = await getroleUser(id, params)
  // console.log(resA.data, '关联用户')
  roleUser.value = resA.data
}
// 删除角色
async function DelRole(id) {
  if (roleUser.value.rows.length === 0) {
    try {
      const result = await Confirm('删除后改角色下的用户权限失效，是否删除?')
      console.log(result) // 在这里处理成功的回调，result 的值为 true
      const res = await delRole(id)
      msg('success', '删除' + res.msg)
      AllRole()
    } catch (error) {
      console.log(error) // 在这里处理失败的回调，error 的值为 false
    }
  } else {
    await Confirm('删除角色前，请先移除角色内的所有成员!')
  }
}
defineOptions({
  name: 'RoleIdenx'
})

AllRole()
</script>
<template>
  <div class="box">
    <div class="box-nei">
      <!-- row-1 -->
      <a-row>
        <!-- row-1-左 角色-->
        <a-col
          :xs="20"
          :sm="14"
          :md="8"
          :lg="6"
          :xl="5"
          :xxl="5"
          :span="5"
          style="border-right: 1px solid #e4e7ec; user-select: none"
        >
          <a-menu v-model:selectedKeys="muaeId">
            <a-menu-item v-for="item in Roles" :key="item.roleId">
              <template #default>
                <div style="position: relative">
                  <div class="muae">
                    <a-tooltip>
                      <template #title>{{ item.remark }}</template>
                      <team-outlined />
                      <span>{{ item.roleName }}</span>
                    </a-tooltip>
                  </div>
                  <!-- 下拉框 -->
                  <div
                    class="rigd"
                    style="position: absolute; right: 0; top: 50%; transform: translateY(-50%)"
                  >
                    <a-dropdown trigger="click">
                      <a class="ant-dropdown-link" @click.prevent>
                        <holder-outlined />
                        <DownOutlined />
                      </a>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item
                            @click="
                              router.push({ path: '/rolechange', query: { id: item.roleId } })
                            "
                          >
                            <span>编辑角色</span>
                          </a-menu-item>
                          <a-menu-divider />
                          <a-menu-item @click="DelRole(item.roleId)">
                            <span style="color: red; width: 100%; height: 100%">删除</span>
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </div>
                </div>
              </template>
            </a-menu-item>
          </a-menu>
          <!-- 添加角色 -->
          <div class="bumbtn">
            <a-button block @click="router.push('/rolechange')">添加角色</a-button>
          </div>
        </a-col>
        <!-- row-1-右 -->
        <a-col
          :xs="4"
          :sm="10"
          :md="16"
          :lg="18"
          :xl="19"
          :xxl="19"
          :span="19"
          style="height: 600px"
        >
          <!-- tabs -->
          <a-tabs v-model:activeKey="activeKey" style="margin-bottom: 0">
            <!-- 权限 -->
            <a-tab-pane key="1" tab="功能权限" style="height: 100%">
              <a-row style="border-top: 1px solid #e4e7ec; height: 500px">
                <a-col :flex="3" v-for="(item, index) in Permision" :key="item.id">
                  <span class="span-a" @click="console.log(buildTree(item))">
                    {{ item.title }}
                  </span>
                  <!-- 树 -->
                  <a-tree
                    :selectable="false"
                    :default-expand-all="true"
                    checkable
                    disabled
                    :tree-data="item.children"
                    :fieldNames="{ key: 'id' }"
                    v-model:checked-keys="PickOn[index]"
                  >
                    <template #title="{ title, key }">
                      <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
                      <template v-else>{{ title }}</template>
                    </template>
                  </a-tree>
                </a-col>
              </a-row>
            </a-tab-pane>
            <!-- 成员 -->
            <a-tab-pane key="2" force-render>
              <template #tab> 成员({{ roleUser.total }}) </template>
              <!-- table -->
              <a-table :columns="columns" :data-source="roleUser.rows" :pagination="false">
                <template #bodyCell="{ column, index }">
                  <template v-if="column.dataIndex === 'index'">
                    {{ index + 1 }}
                  </template>
                </template>
              </a-table>
              <!-- 分页 -->
              <div class="box-fy" style="width: 100%; text-align: end">
                <a-pagination
                  v-model:current="current"
                  v-model:page-size="pageSize"
                  :total="88"
                  :show-total="(total) => `共 ${total} 页`"
                  :page-size-options="['5', '10', '15', '20']"
                  @change="onChange(getRoleusers, muaeId)"
                />
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  padding-left: 20px;
  // overflow: hidden;
  .box-nei {
    width: 100%;
    height: 100%;
    // overflow: hidden;
    background-color: #fff;
  }
}
.bumbtn {
  width: 100%;
  padding: 0 10px;
  text-align: center;
  margin: 20px 0;
}
::v-deep .ant-popover {
  /* 设置背景颜色 */
  background-color: #922525 !important;
  color: red !important;
}
::v-deep .ant-tabs-nav-wrap {
  padding-left: 20px;
}
// ::v-deep .ant-tabs-tabpane-active {
//   // padding-left: 20px;
// }
::v-deep .ant-tabs-nav {
  margin-bottom: 0;
}
::v-deep .ant-col {
  border-right: 1px solid #e4e7ec !important;
  height: 100%;
  padding: 15px;
}
.span-a {
  width: 100%;
  height: 22px;
  padding: 10px 0;
  background-color: #f5f7fa;
  display: inline-block;
  box-sizing: content-box;
  text-align: center;
  line-height: 22px;
}
</style>
